// 导入默认图片
import defaltImg from '@/assets/images/200.png'
// 导入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'
// 导出自定义指令
export default {
  // 以插件形式注册
  install (app) {
    // 在app实例上调用自定义指令API
    app.directive('imgLazy', {
      // vue3自定义指令内置API(执行时机)元素插入父 DOM 后发生
      mounted (el, binding) {
        // el:img dom对象
        // binding.value  图片url地址
        const { stop } = useIntersectionObserver(
          // 监听目标元素
          el,
          // 执行的回调
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting 布尔值 是否在视口内
            if (isIntersecting) {
              //   当图片url无效加载失败时使用默认图片代替
              el.onerror = function () {
                el.src = defaltImg
              }
              el.src = binding.value
              // 阻止下次调用(避免反复调用)
              stop()
            }
          },
          //   刚进入视口区域就立刻执行回调(执行时机)
          { threshold: 0 }
        )
      }
    })
  }
}
